
# Component: Figure

Responsive image wrapper with optional captions and gallery triggers

Content Block

![[Pasted image 20260426084126.png]]

### BEM Anatomy

| Type      | Class Name   | Description                                                                                    |
| --------- | ------------ | ---------------------------------------------------------------------------------------------- |
| ==Block== | `.as-figure` | The `<figure>` element. Resets default margins and forces a 100% width container.              |
| Element   | `__img`      | The image element. Enforces a `border-radius` and maintains responsiveness via `height: auto`. |
| Element   | `__caption`  | The `<figcaption>` element. Center-aligns descriptive text beneath the image.                  |

### Interaction Logic

The component dynamically wraps the `__img` element based on provided data:

- **Linked:** Wraps image in an `<a href="...">` for external navigation.
- **Enlargeable:** Wraps image in a lightbox anchor (using `GalleryId`) to view high-resolution versions.
- **Static:** Renders the image directly when no interaction is configured.

##### Generated HTML (Gallery Mode)

```html
<figure class="as-figure">
    <a href="/high-res.jpg" class="gallery-123" data-title="Forest">
        <img src="/thumb.jpg" class="as-figure__img" alt="Forest View" />
    </a>
    <figcaption class="as-figure__caption">
        A beautiful view of the morning forest.
    </figcaption>
</figure>
```

##### SCSS

```scss
.as-figure {
  width: 100%;
  margin: 0;

  &__img {
    max-width: 100%;
    height: auto;
    // Overriding specific Bootstrap resets
    border-radius: var(--bs-border-radius) !important;
    line-height: 1;
  }

  &__caption {
    text-align: center;
    padding-top: 0.5rem;
  }
}
```
